<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="路志莹">
    <title>个税计算器</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">
    <style>
    body{
        min-width: 300px;
    }
        .text{
            text-align: center;
        }
        #app{
           height: 400px;
        }
        .text-p{
            margin-top: 20px;
        }
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        li{
            margin: 10px;
            position: relative
        }
        input{
            width: 26px;
        }
        .sp{
            position: absolute;
            right: 0px;
        }
    </style>
</head>

<body>
    <div class="panel panel-primary">
        <div class="panel-heading text">个税计算器</div>
        <div class="panel-body">
          <div id="app">
               <input type="text" class="form-control" v-model.number='money'>
               <p v-show='money<=3500? true:false' class="text-p">没有超过扣除标准</p>
               <div v-show=' money>3500? true:false' class="text-p">
                <ul>
                    <li v-for=" tab in rate">
                        {{tab.msg}}
                        <input type="text" v-model.number='tab.num' >%
                        <span class="sp">{{money*tab.num*0.01|point}}</span>
                        
                    </li>
                    <li>
                        税前工资
                        <span class="sp">{{up|point}}</span>
                    </li>
                    <li>
                        个人所得税
                        <span class="sp">{{ person|point}}</span>
                    </li>
                    <hr>
                    <li>
                       税后工资
                        <span class="sp">{{gong|point}}</span>
                    </li>
                </ul>
               </div>
              
          </div>
        </div>
    </div>
    <script src="js/vue.js">

    </script>
    <script>
     Vue.filter("point",function(v,i=2){
        
        return v.toFixed(i)
    })
    var app=new Vue({
        el:'#app',
        data:{
            money:0,
            rate:[{
                msg:'养老保险',
                num:4,
            },
            {
                msg:'医疗保险',
                num:4
            },
            {
                msg:'医疗保险',
                num:0
            },{
                msg:'住房公积金',
                num:0
            }],
            
        },
        filters:{
            point(d,p=2){
                return d.toFixed(p)
            }
        },
        computed:{
            // 计算税前工资
            up(){
              let sum=0
            this.rate.forEach(function(item){
                sum=sum+item.num
            })
            return (1-sum*0.01)*this.money
           },
        //    计算个人所得税
           person(){
           let m=this.up-3500
        //    console.log(m)
           if(m<=1500){
               return m*0.03
           }
           else if(m<=4500){
               return m*0.1-105
           }
            else if(m<=9000){
               return m*0.2-555
           }
           else if(m<=35000){
               return m*0.25-1005
           }
           else if(m<=55000){
               return m*0.3-2755
           }
           else if(m<=80000){
               return m*0.35-5505
           }
           else if(m>80000){
               return m*0.45-13505
           }

        },
        // 计算税后工资
        gong(){
            return this.up-this. person
        }
        }

    })
    </script>
</body>

</html>